<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{{ asset('layui/css/layui.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('files/awesome-4.7.0/css/font-awesome.min.css') }}"/>
    <meta name="csrf_token" content="{{ csrf_token() }}"/>
    <script src="{{ asset('layui/layui.js') }}"></script>
</head>
<body style="background: #ffffff;">
<style type="text/css">
    .pop_cont {
        padding: 0 15px;
    }

    .edit_uping {
        height: 30px;
        margin-bottom: 10px;
    }

    .edit_uping .addnew {
        float: left;
        margin-right: 10px;
        width: 75px;
        height: 28px;
        line-height: 28px;
        font-weight: 700;
        color: #fff;
    }

    .edit_uping .addnew {
        background-position: left bottom;
    }

    .edit_uping .num {
        color: #999999;
        float: right;
        margin-top: 5px;
    }

    .edit_uping .num em {
        color: #FF5500;
        font-style: normal;
    }

    .eidt_uphoto {
        border: 1px solid #CCCCCC;
    }

    .eidt_uphoto ul {
        height: 280px;
        overflow-y: scroll;
        padding-bottom: 10px;
        position: relative;
    }

    .eidt_uphoto li {
        display: inline;
        float: left;
        height: 100px;
        margin: 10px 0 0 10px;
        width: 87px;
    }

    .eidt_uphoto .schedule span {
        background: none repeat scroll 0 0 #F0F5F9;
        height: 98px;
        left: 0;
        position: absolute;
        top: 0;
    }

    .eidt_uphoto .schedule em {
        left: 0;
        position: absolute;
        text-align: center;
        top: 0;
        width: 78px;
        z-index: 1;
    }

    .eidt_uphoto .get {
        background: #ffffff;
        border: 1px solid #cccccc;
        position: relative;
        overflow: hidden;
    }

    .eidt_uphoto .selected {
        border: 2px solid #1D76B7;
    }

    .eidt_uphoto .get img {
        cursor: pointer;
    }

    .eidt_uphoto .del {
        position: absolute;
        width: 15px;
        height: 15px;
        background:url('/images/upload_del.png') no-repeat;
        right: 1px;
        top: 1px;
        overflow: hidden;
        text-indent: -2000em;
        display: none;
    }

    .eidt_uphoto .del:hover {
        background-position: -20px 0;
    }

    .eidt_uphoto .get img {
        vertical-align: top;
        width: 87px;
        height: 75px;
        border-bottom: 1px solid #ccc;
    }

    .eidt_uphoto .get input {
        border: 0;
        outline: 0 none;
        margin-left: 3px;
    }

    .eidt_uphoto .get .edit {
        position: absolute;
        height: 22px;
        line-height: 22px;
        text-align: center;
        width: 78px;
        bottom: 0;
        left: 0;
        background: #e5e5e5;
        color: #333;
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        opacity: 0.7;
        display: none;
    }

    .eidt_uphoto li:hover .edit, .eidt_uphoto li:hover .del {
    }

    /* 图片管理样式 */
    #online {
        width: 100%;
        height: 336px;
        padding: 10px 0 0 0;
    }

    #online #imageList {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
    }

    #online ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #online li {
        float: left;
        display: block;
        list-style: none;
        padding: 0;
        width: 113px;
        height: 113px;
        margin: 0 0 9px 9px;
        *margin: 0 0 6px 6px;
        background-color: #eee;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }

    #online li.clearFloat {
        float: none;
        clear: both;
        display: block;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }

    #online li img {
        cursor: pointer;
    }

    #online li .icon {
        cursor: pointer;
        width: 113px;
        height: 113px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        border: 0;
        background-repeat: no-repeat;
    }

    #online li .icon:hover {
        width: 107px;
        height: 107px;
        border: 3px solid #1094fa;
    }

    #online li.selected .icon {
        background-image: url('images/success.png');
        background-image: url('images/success.gif');
        background-position: 75px 75px;
    }

    #online li.selected .icon:hover {
        width: 107px;
        height: 107px;
        border: 3px solid #1094fa;
        background-position: 72px 72px;
    }

    .btn-close-frame {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 20px;
    }
</style>
<div class="layui-tab layui-tab-brief" lay-filter="uploadTab" style="margin:0">
    <ul class="layui-tab-title">
        <li class="layui-this" data-id="upload-tab">上传图片</li>
        <li data-id="network-tab">网络图片</li>
        <li data-id="preview-tab">浏览图片</li>
    </ul>
    <a class="btn-close-frame"><i class="fa fa-close"></i></a>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="pop_cont">
                <div class="">
                    <div class="edit_uping">
                        <!--选择按钮-->
                        <div class="addnew">
                            <button type="button" class="layui-btn" id="btn_upload">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                        <span class="num">@if($mode==2 && $number==0) @else 最多上传<em> {{ $mode==1?1:$number }}</em> 个附件,@endif单文件最大 <em>{{ $size }}KB</em></span>
                    </div>
                    <div class="eidt_uphoto">
                        <ul id="fsUploadProgress" class="cc">
                            {{--<li class="J_empty"><div class="no">暂无</div></li>--}}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div class="pop_cont"> 请输入网络地址
                <div class="bk3"></div>
                <input type="text" id="network_file" name="info" class="layui-input" value="" style="width:600px;"
                       placeholder="http://"/>
            </div>
        </div>
        <div class="layui-tab-item">
            <div id="online" class="pop_cont">
                <div id="imageList">
                    <ul class="list"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="upload_item">
    <li class="uploaded">
        <div class="get selected" id="aid-@{{ d.id }}">
            <a class="del" href="javascript:;">删除</a>
            <img width="87" height="98" src="@{{ d.path }}" data-id="@{{ d.id }}" data-path="@{{ d.path }}"
                 title="@{{ d.name }}">
        </div>
    </li>
</script>
<div id="select_images" class="layui-hide">33</div>
<script>
    var mode = parseInt("{{ $mode }}");
    var size = parseInt('{{ $size }}');
    var number = parseInt('{{ $number }}');
    var field = "{{ $field }}";
    var is_multiple = "{{ $mode==2?true:false }}";


    var listIndex = 0;
    var listEnd = false;
    var listSize = 20;
    var isLoadingData = false;

    layui.use(['element', 'jquery', 'upload', 'layer', 'form', 'laytpl'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            form = layui.form,
            laytpl = layui.laytpl,
            upload = layui.upload;

        element.on('tab(uploadTab)', function (data) {
            var _this = $(this);
            $('#select_images').html("");
            var current_id = _this.data('id');
            if (current_id == 'upload_tab') {
                $("#fsUploadProgress").html("");
            } else if (current_id == 'network_tab') {
                $("#network_file").val("");
            } else {
                $("#imageList ul").html("");
                listIndex = 0;
                listEnd = false;
                listSize = 20;
                isLoadingData = false;
                getImageData();
            }
        });

        $('.btn-close-frame,.btn-cancle-form').on('click', function () {
            parent.layer.closeAll();
        })
        $('#network_file').on('blur', function () {
            var strs = $(this).val() ? $(this).val() : '';
            $('#select_images').html(strs);
        })
        $('#fsUploadProgress').on('mouseover mouseout', 'li', function (event) {
            if (event.type == 'mouseover') {
                $('.eidt_uphoto .del').show();
            } else {
                $('.eidt_uphoto .del').hide();
            }
        })
        $('#fsUploadProgress').on('click', '.del', function () {
            $(this).parents('li').eq(0).remove();
            var image_count = $('#fsUploadProgress li').length;
            if (image_count < number) {
                $("#btn_upload").removeClass('layui-btn-disabled').prop('disabled', '');
            }
        })
        var _token = $('meta[name=csrf_token]').attr('content');
        //执行实例
        var uploadInst = upload.render({
            elem: '#btn_upload' //绑定元素
            , url: '/uploader/{{ $client }}' //上传接口
            , method: 'post'
            , data: {'_token': _token}
            , multiple: is_multiple
            , number: number
            , size: size
            , field: field
            , done: function (res) {
                //上传完毕回调
                if (res.code == 1) {
                    var item_html = $("#upload_item").html();
                    laytpl(item_html).render(res.data.data, function (html) {
                        $("#fsUploadProgress").append(html);
                    })
                    var imgstr = $("#select_images").html();
                    //图片地址
                    if (imgstr == "") {
                        imgstr = res.data.data.path;
                    } else {
                        imgstr += '|' + res.data.data.path;
                    }
                    //放入被选中的容器
                    $('#select_images').html(imgstr);
                    var image_count = $('#fsUploadProgress li').length;
                    if (image_count >= number && number>0) {
                        $("#btn_upload").addClass('layui-btn-disabled').prop('disabled', 'disabled');
                    }
                } else {
                    console.log(res);
                }
            }
            , error: function (res) {
                //请求异常回调
            }
        });
        $('#imageList').scroll(function (e) {
            var panel = this;
            if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
                getImageData();
            }
        });

        $("#select_images").html("");
        $(".third").click(function () {
            /* 第一次拉取数据 */
            getImageData();
        });

        $("#imageList .list").on("click", "li", function () {
            //判断当前存在selected的个数
            var counts = $("li.selected").length;
            if ($(this).hasClass("selected")) {
                $(this).removeClass("selected");
                var selected = $("#imageList li.selected");
                //计算被选中的附件长度
                var length = selected.length;
                var strs = filenames = '';
                for (var i = 0; i < length; i++) {
                    //图片地址
                    strs += '|' + selected.eq(i).find("img").eq(0).attr('url');
                }
                //放入被选中的容器
                $('#select_images').html(strs);
            } else {
                if (counts >= number && number>0) {
                    layer.msg("只能同时选择" + number + "个图片!", {icon: 5, times: 2000});
                    return false;
                }
                $(this).addClass("selected");
                var imgstr = $("#select_images").html();
                if(imgstr !=""){
                    imgstr += '|' + $(this).find("img").eq(0).attr('src');
                }else{
                    imgstr +=  $(this).find("img").eq(0).attr('src');
                }
                $('#select_images').html(imgstr);
            }
        });

        function getImageData() {
            if (!listEnd && !isLoadingData) {
                isLoadingData = true;
                var url = "{{ url('filelist/'.$client) }}";
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {start: listIndex, size: listSize},
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 1) {
                            pushData(data.data.list);
                            listIndex = parseInt(data.start) + parseInt(data.data.list.length);
                            if (listIndex >= data.total) {
                                listEnd = true;
                            }
                            isLoadingData = false;
                        }
                    }
                });
            }
        }

        function pushData(list) {
            var str = "";
            for (i = 0; i < list.length; i++) {
                if (list[i] && list[i].url) {
                    str += '<li><img width="113px" src="' + list[i].url + '" _src="' + list[i].url + '" data-id="' + list[i].aid + '" title="' + list[i].title + '" height="143" style="margin-top: 0px;"><span class="icon"></span></li>';
                }
            }
            $("#imageList .list").append(str);
        }
    })
</script>
</body>
</html>